import React from 'react';
import { useNavigate, useLocation } from 'react-router-dom';
import './video.css';

interface VideoDetailProps {
  video?: string;
  name?: string;
  avatar?: string;
  introduce?: string;
  comment?: string;
}q

const VideoDetail: React.FC = () => {
  const navigate = useNavigate();
  const location = useLocation();
  const videoData = location.state as VideoDetailProps;

  const handleBack = () => {
    navigate(-1);
  };

  return (
    <div className="video-detail-container">
      <div className="video-detail-header">
        <button className="back-button" onClick={handleBack}>
          返回
        </button>
        <div className="user-info-detail">
          <div className="user-avatar">
            <img src={videoData.avatar} alt="user avatar" />
          </div>
          <div className="user-info">
            <div className="username">{videoData.name}</div>
            <div className="description">{videoData.introduce}</div>
          </div>
          <button className="follow-btn">关注</button>
        </div>
      </div>

      <div className="video-player-wrapper">
        <video
          className="video-player-detail"
          src={videoData.video}
          controls
          playsInline
          autoPlay
        />
      </div>

      <div className="video-detail-actions">
        <div className="action-item">
          <span className="action-icon">❤️</span>
          <span className="action-count">0</span>
        </div>
        <div className="action-item">
          <span className="action-icon">💬</span>
          <span className="action-count">0</span>
        </div>
        <div className="action-item">
          <span className="action-icon">⤴️</span>
          <span className="action-count">0</span>
        </div>
      </div>

      <div className="video-detail-comments">
        <div className="comment-text">{videoData.comment}</div>
      </div>
    </div>
  );
};

export default VideoDetail;